<template>
    <div class="data-screen-container">
        <div class="data-screen" ref="dataScreenRef">
            <DataScreenHeader></DataScreenHeader>
            <div class="data-content">
                <div class="content">
                    <LeftTop class="card"></LeftTop>
                    <LeftCenter class="card"></LeftCenter>
                    <LeftBottom class="card"></LeftBottom>
                </div>
                <div class="content">
                    <CenterTop class="card"></CenterTop>
                    <CenterBottom class="card"></CenterBottom>
                </div>
                <div class="content">
                    <RightTop class="card"></RightTop>
                    <RightCenter class="card"></RightCenter>
                    <RightBottom class="card"></RightBottom>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import LeftBottom from './components/leftBottom/LeftBottom.vue'

const dataScreenRef = ref<HTMLDivElement>()
const getScale = (w = 1920, h = 1080) => {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return ww < wh ? ww : wh
}
const resizeHandle = () => {
    ;(dataScreenRef as Ref<HTMLDivElement>).value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}

onMounted(() => {
    resizeHandle()
    window.addEventListener('resize', resizeHandle)
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandle)
})
</script>

<style lang="scss" scoped>
.data-screen-container {
    width: 100vw;
    height: 100vh;
    background: url('../images/bg.png') no-repeat;
    background-size: cover;
    // background: content-box radial-gradient(#173b7c, #050820);

    .data-screen {
        width: 1920px;
        height: 1080px;
        position: fixed;
        transform-origin: left top;
        left: 50%;
        top: 50%;

        .data-content {
            width: 100%;
            height: calc(100% - 87px);
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr;
            margin-top: 10px;

            .content {
                margin: 0 10px;
                display: grid;
                grid-template-rows: repeat(3, 1fr);

                .card {
                    background-color: #173b7c75;
                }

                &:nth-child(2) {
                    :first-child {
                        // 占两行
                        grid-row: 1 / 3;
                        background-color: transparent;
                    }
                }
            }
        }
    }
}
</style>
